<script lang="ts" setup>
  import { ref, onMounted, computed, nextTick } from "vue";

  defineProps<{ content: string }>();

  const targetRef = ref<HTMLDivElement | null>();
  const height = ref(0);
  const visible = ref(false);

  function getHeight() {
    nextTick(() => {
      if (targetRef.value) {
        height.value = targetRef.value.getBoundingClientRect().height + 12;
      }
    });
  }

  const contentStyles = computed(() => {
    return {
      top: `-${height.value}px`,
    };
  });

  const showContent = () => {
    visible.value = true;
    getHeight();
  };

  onMounted(() => {
    // document.addEventListener("mouseover", clickOutsideHandler);
  });
</script>

<template>
  <div class="umrp-tooltip">
    <div ref="targetRef" @mouseenter="showContent" @mouseleave="visible = false">
      <slot></slot>
    </div>
    <div class="content" v-show="visible" :style="contentStyles">
      <div>{{ content }}</div>
      <div class="arrow"></div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
  .umrp-tooltip {
    position: relative;
    cursor: pointer;

    .content {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      z-index: 999;
      background: #000000;
      border-radius: 4px;
      padding: 4px 8px;
      color: #fff;
      font-size: 14px;
      line-height: 1.5;
      white-space: nowrap;

      .arrow {
        content: "";
        height: 8px;
        width: 8px;
        position: absolute;
        display: block;
        box-sizing: border-box;
        transform-origin: 50% 50% 0;
        background-color: #000;
        left: 50%;
        transform: rotate(45deg) translateX(-70%);
        bottom: -7px;
      }
    }
  }
</style>
